<template>

       <el-dialog
          :model-value="visible"
          width="30%"
          @close="dialogClose"
          title="请选择SSH连接凭据"
          >
           <td>
          <el-col :span="4">
            <el-icon :size="25"><lock/></el-icon>
          </el-col>
          </td>
           <td>
          <el-col :span="20" :offset="2" style="width: 300px; margin-left: 5px" v-loading="loading" element-loading-text="主机配置同步中...">
            <el-select class="m-2" v-model="credentialId" @click="getCredential" placeholder="请选择">
              <el-option v-for="row in credential" :key="row.id" :label="`${row.name}-${row.username}`" :value="row.id">
              </el-option>
            </el-select>
          </el-col>
           </td>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogClose">取消</el-button>
              <el-button type="primary" @click="submit">确定</el-button>
            </span>
          </template>
        </el-dialog>

</template>

<script>
    export default {
        name: "ServerSync",
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        data() {
            return {
                credentialId: '',
                credential: '',
                credentialVisible: '',
                loading: false
            }

        },
        methods: {
            dialogClose() {
                this.$emit('update:visible', false);  // 当对话框关闭，通过父组件更新为false
                this.$parent.getData();
            },
            getCredential() {
                this.$http.get('/config/credential/?page_size=50')
                    .then(res => {
                        this.credential = res.data.data;
                    });
            },
            // 选择凭据后确认
            submit() {
                console.log(this.credentialId)
                if (this.credentialId) {
                   this.loading = true
                   this.$http.get('/cmdb/host_collect/', {params: {
                    'hostname': this.row.hostname,
                    'credential_id': this.credentialId
                    }})
                    .then(res => {
                          if (res.data.code === 200) {
                            this.$message.success('同步成功');
                            this.dialogClose()  // 关闭窗口
                            this.loading = false
                          }else {
                            // this.$message.error(res.data.msg);
                            this.loading = false
                          }
                    })
                }else {
                    this.$message.warning('请选择凭据')
                }

            },
        }
    }
</script>

<style scoped>

</style>